---
title: 编辑器配置
description: 配置与 Astro 一同使用的编辑器
---
import Badge from '~/components/Badge.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

自定义你的代码编辑器，以改善 Astro 开发体验并解锁新功能。

## VS Code

[VS Code](https://code.visualstudio.com) 是由 Microsoft 构建，受网页开发者欢迎的代码编辑器。VS Code 引擎还对云端代码编辑器像 [GitHub Codespaces](https://github.com/features/codespaces) 和 [Gitpod](https://gitpod.io) 提供了支持。

Astro 可以和任意编辑器一同工作。但是，VS Code 是我们推荐的 Astro 项目编辑器。我们维护着一个官方 [Astro VS Code 扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)，为 Astro 项目提供了几个关键特性并改善开发者体验。

- 为 `.astro` 文件提供语法高亮
- 为 `.astro` 文件提供 TypeScript 类型信息。
- [VS Code 智能提示](https://code.visualstudio.com/docs/editor/intellisense)提供代码补全和提示

开始前需要先安装 [Astro VS Code 扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)。

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>查看如何在你的 Astro 项目中[设置 TypeScript](/zh-cn/guides/typescript/)。</ReadMore>

## JetBrains IDE

Astro 的初始支持已经在 WebStorm 2023.1 中推出。你可以通过 [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) 或在 IDE 的插件选项卡中搜索“Astro”来安装官方插件。此插件包括诸如语法高亮、代码补全和格式化之类的功能，并计划在未来添加更多高级功能。它还可用于所有其他[支持 JavaScript 的 JetBrains IDE](https://www.jetbrains.com/products/#lang=js&type=ide)。


## 其他代码编辑器

我们令人惊喜的社区为其他受欢迎的编辑器维护了几个扩展，它们包括：

- [Open VSX 上的 VS Code 扩展](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent">官方</Badge></span> - 官方 Astro VS Code 扩展，同时在 Open VSX registry 上分发，为其他开发平台如 [VSCodium](https://vscodium.com/) 提供支持
- [Nova 扩展](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/)<span style="margin: 0.25em;"><Badge variant="neutral">社区</Badge></span> - 为 Astro 提供语法高亮、智能提示、自动补全
- [Vim 插件](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">社区</Badge></span> - 在 Vim 或 Neovim 中为 Astro 提供语法高亮、缩进和代码折叠支持
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) 和 [TreeSitter](https://github.com/virchau13/tree-sitter-astro) 插件 <span style="margin: 0.25em;"><Badge variant="neutral">社区</Badge></span> - 为 Neovim 内的 Astro 提供语法高亮、treesitter 解析和代码补全。
- Emacs - 查看 [配置 Emacs 和 Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) 的指南<span style="margin: 0.25em;"><Badge variant="neutral">社区</Badge></span> - 与 Astro 协作
- [适用于 Sublime Text 的 Astro 语法高亮](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">社区</Badge></span> - 适用于 Sublime Text 的 Astro 包可在 Sublime Text 包管理器上获取

## 云端编辑器

除本地编辑器外，Astro 同样适用于云端托管编辑器，包括：

- [StackBlitz](https://stackblitz.com) 和 [CodeSandbox](https://codesandbox.io) - 运行在你浏览器中的编辑器，并为 `.astro` 文件提供支持并内置语法高亮。无需安装或配置！
- [GitHub.dev](https://github.dev) - 可以将 Astro VS Code 扩展安装为[网页 extension](https://code.visualstudio.com/api/extension-guides/web-extensions) 只能使用部分功能，目前仅支持语法高亮。
- [Gitpod](https://gitpod.io) - 云上的完整开发环境，可以从 Open VSX 上安装官方 Astro VS Code 扩展。

## 其他工具

### ESLint

[ESLint](https://eslint.org/) 是流行的 JavaScript 和 JSX 的 linter。为了支持 Astro，需要安装[一个由社区维护的插件](https://github.com/ota-meshi/eslint-plugin-astro)。

关于如何为你的项目安装和设置 ESLint 的更多信息，请参见[此插件的用户指南](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/)。

### Stylelint

[Stylelint](https://stylelint.io/) 是流行的 CSS 代码检查工具。为了支持 Astro，需要安装[一个由社区维护的 Stylelint 配置文件](https://github.com/ota-meshi/stylelint-config-html)。

有关安装说明、编辑器集成和其他信息，请参阅该工具的 README 文件。

### Prettier

[Prettier](https://prettier.io/) 是一个流行的 JavaScript、HTML、CSS 等格式化工具。如果你使用 [Astro VS Code 扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)或[支持 Astro 语言服务器的其他编辑器](#其他代码编辑器)，Prettier 格式化功能已经内置。

要在编辑器之外（例如 CLI）或者在不支持我们的编辑器工具的编辑器中为 `.astro` 文件添加格式化支持，请安装[官方 Astro Prettier 插件](https://github.com/withastro/prettier-plugin-astro)。

要开始使用，首先要安装 Prettier 和该插件：

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install --save-dev prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add -D prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add --dev prettier prettier-plugin-astro
  ```
  </Fragment>
</PackageManagerTabs>

然后 Prettier 会自动检测到这个插件，并在运行时使用它来处理 `.astro` 文件：

```shell
prettier --write .
```

参见 [Prettier 插件的 README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md)，以获得更多关于其支持的选项、如何在 VS Code 内设置 Prettier 等信息。
